<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>视频后台管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--    <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">-->
    <link href="/node_modules/layui/dist/css/layui.css" rel="stylesheet">

</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">后台管理页面</div>
        <!--    右部分-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" lay-on="modifyPwd">修改密码</a></dd>
                    <dd><a href="/logout">退出</a></dd>
                    <!--                    <dd><a href="javascript:;">Sign out</a></dd>-->
                </dl>
            </li>
            <!--<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>-->
        </ul>
    </div>

    <!--  左部分，导航栏 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-shrink="_all" lay-filter="admin-side-nav">
                <!--  子跳转，将body页面改变为指定页面  -->

                <li class="layui-nav-item layui-this"><a class="custom-text" href="/admin/account/index">账户管理</a>
                </li>
                <li th:if="${isAdmin}" class="layui-nav-item "><a class="custom-text" href="/admin/user/index">用户管理</a>
                </li>
                <li class="layui-nav-item "><a class="custom-text" href="/admin/video/index">视频管理</a></li>
                <!--                <li class="layui-nav-item "><a class="custom-text" href="/admin/videoLog/index">同步日志</a></li>-->
                <li class="layui-nav-item"><a class="custom-text" href="/admin/device/index">设备操作</a></li>
                <li  th:if="${isAdmin}"  class="layui-nav-item"><a class="custom-text" href="/admin/setting/index">系统设置</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="/admin/account/index" id="main" width="100%" style="height: 99.9%" frameborder="0"></iframe>

    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->

    </div>
</div>

<style>
    .custom-text {
        text-align: center;
    }

</style>


<script src="/node_modules/layui/dist/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'jquery', 'util', 'form'], function () {
        var $ = layui.jquery;
        var element = layui.element;
        var util = layui.util;
        var form = layui.form;
        $(document).ready(function () {
            $("li>a").click(function (e) {
                e.preventDefault();
                $("#main").attr("src", $(this).attr("href"));
            });
        });


        util.event('lay-on', {
            modifyPwd: function () {
                // layer.alert("修改密码");
                layer.open({
                    title: '修改密码',
                    type: 1,
                    area: '350px',
                    resize: false,
                    shadeClose: true,
                    content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item" style="display: none;">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                  </div>
                  <input type="text" name="username"  id="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                  </div>
                  <input type="text" name="password" value="" lay-verify="required" placeholder="修改后的密码" lay-reqtext="请填写修改后的密码" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                  </div>
                  <input type="text" name="confirmPassword" value="" lay-verify="required" placeholder="请确认密码" lay-reqtext="请确认修改后的密码" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>

              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="confirmModify">确认</button>
              </div>
            </div>
          </div>
        `,
                    success: function () {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        $.ajax({
                            url: '/admin/user/info',
                            method: 'POST',
                            success: function (res) {
                                if (res.code === 0) {
                                    console.log("res = "+res)
                                    $('#username').val(res.data)
                                    form.render('username')
                                } else {
                                    layer.msg(res.msg, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })

                        // 表单提交事件
                        form.on('submit(confirmModify)', function (data) {
                            var field = data.field; // 获取表单字段值
                            var index = layer.load(0, {shade: false});
                            if(field.password !== field.confirmPassword){
                                layer.msg("两次密码不一致,请确认！", {
                                    icon: 2,
                                    time: 1000
                                });
                                layer.close(index);
                                return false;
                            }
                            console.log("data = ",field)
                            delete field.confirmPassword;
                            // 显示填写结果，仅作演示用
                            $.ajax({
                                url: '/user/update',
                                method: 'POST',
                                data: JSON.stringify({
                                    userName: field.username,
                                    userPwd: field.password
                                }),
                                contentType: 'application/json',
                                success: function (res) {
                                    layer.close(index);
                                    if(res.code === 0){
                                        layer.msg(res.msg, {
                                            icon: 1,
                                            time: 1000
                                        });
                                    }else{
                                        layer.msg(res.msg, {
                                            icon: 2,
                                            time: 1000
                                        });
                                    }

                                    setTimeout(function () {
                                        layer.closeAll();
                                    }, 1100);

                                },
                                error: function (res) {
                                    layer.close(index);
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000
                                    });
                                    setTimeout(function () {
                                        layer.closeAll();
                                    }, 1100);

                                }

                            })
                            return false; // 阻止默认 form 跳转
                        });
                    },
                });
            },
            logout: function () {
                layer.confirm('确认退出？', {
                    btn: ['确定', '关闭'] //按钮
                }, function () {
                    var load = layer.load(0, {shade: false});
                    $.ajax({
                        url: '/admin/user/logout',
                        method: 'POST',
                        success: function (res) {
                            setTimeout(function () {
                                layer.close(load);
                                window.location.href = '/admin/login';
                            }, 800)

                        },
                        error: function (res) {
                            setTimeout(function () {
                                layer.close(load);
                                window.location.href = '/admin/login';
                            }, 800)

                        }
                    })
                }, function () {
                });
            }
        });
    });


    /*layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });*/
</script>
</body>
</html>
